<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">组织列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="dialogVisible=true">新增组织</el-button>
  </div>
  <!-- 新增组织弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;text-align: center"
             :before-close="closeDialog">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="创建人" style="margin-bottom: 0"></el-form-item>
          <el-input readonly :value="user.username"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织名称" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入组织名称" v-model="organization.name"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12" style="text-align: left;">
          <el-form-item label="成立日期" style="margin-bottom: 0"></el-form-item>
          <el-date-picker
              type="date"
              placeholder="Pick a day"
              value-format="YYYY-MM-DD"
              style="width: 445px;"
              v-model="organization.establishmentDate"
          />
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织简称" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入组织简称" v-model="organization.abbreviation"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="联系人" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入联系人" v-model="organization.contactPerson"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属行业" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入所属行业" v-model="organization.industry"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="联系电话" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入联系电话" v-model="organization.contactPhone"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入地址" v-model="organization.address"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="联系邮箱" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入联系邮箱" v-model="organization.contactEmail"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织状态" style="margin-bottom: 0">
            <el-radio-group v-model="organization.status">
              <el-radio value="10" border>激活</el-radio>
              <el-radio value="20" border>不激活</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="所属部门" style="margin-bottom: 0">
            <el-select placeholder="请选择部门" v-model="organization.role">
              <el-option label="行政" value="10"></el-option>
              <el-option label="财务" value="20"></el-option>
              <el-option label="法务" value="30"></el-option>
              <el-option label="人事" value="40"></el-option>
              <el-option label="IT" value="50"></el-option>
              <el-option label="其他" value="60"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织描述" style="margin-bottom: 0"></el-form-item>
          <el-input placeholder="请输入组织描述" type="textarea" resize="none" :rows="3"
                    v-model="organization.description"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form :inline="true">
            <el-form-item style="margin-left: 250px">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="saveOrganization">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <!-- 加入组织弹窗 -->
  <el-dialog title="加入组织" v-model="joinDialogVisible" style="width:1000px;padding:40px;text-align: center" :before-close="joinCloseDialog">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="组织名称">
            <el-input readonly :value="organization.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="24">
          <el-form-item label="所属部门" style="margin-bottom: 0">
            <el-select placeholder="请选择部门" v-model="joinSaveInfo.role">
              <el-option label="行政" value="10"></el-option>
              <el-option label="财务" value="20"></el-option>
              <el-option label="法务" value="30"></el-option>
              <el-option label="人事" value="40"></el-option>
              <el-option label="IT" value="50"></el-option>
              <el-option label="其他" value="60"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form :inline="true">
            <el-form-item style="margin-left: 250px">
              <el-button @click="joinCloseDialog">取消</el-button>
              <el-button type="primary" @click="join">加入</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <!-- 组织搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="组织名称">
        <el-input placeholder="请输入组织名称" v-model="search.name"></el-input>
      </el-form-item>
      <el-form-item label="组织简称">
        <el-input placeholder="请输入组织简称" v-model="search.abbreviation"></el-input>
      </el-form-item>
      <el-form-item label="所属行业">
        <el-input placeholder="请输入行业名称" v-model="search.industry"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="research">重置</el-button>
        <el-button type="primary" @click="selectOrganization">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 组织表格 -->
  <el-card style="margin: 20px">
    <el-radio-group style="margin-bottom: 15px;" v-model="level">
      <el-radio-button value="30" size="large" @change="selectOrganization">已创建</el-radio-button>
      <el-radio-button value="10" size="large" @change="selectOrganization">已加入</el-radio-button>
    </el-radio-group>
    <el-table :data="organizationInfo">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="name" label="组织名称"></el-table-column>
      <el-table-column align="center" prop="abbreviation" label="组织简称"></el-table-column>
      <el-table-column align="center" prop="establishmentDate" label="成立日期"></el-table-column>
      <el-table-column align="center" prop="industry" label="所属行业"></el-table-column>
      <el-table-column align="center" prop="contactPerson" label="联系人"></el-table-column>
      <el-table-column align="center" prop="contactEmail" label="联系邮箱"></el-table-column>
      <el-table-column align="center" prop="contactPhone" label="联系电话"></el-table-column>
      <el-table-column align="center" prop="description" label="组织描述"></el-table-column>
      <el-table-column align="center" prop="address" label="地址"></el-table-column>
      <el-table-column align="center" label="组织状态">
        <template #default="scope">
          <el-switch inactive-value="20" active-value="10" v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link v-if="level==30" @click="deleteOrganization(scope.row.id)">删除</el-button>
          <el-button type="primary" size="small" link v-if="level==30" @click="updateOrganization(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="small" link v-if="level==10" @click="logout(scope.row.id)">退出</el-button>
          <el-button type="primary" size="small" link v-if="level==30 && scope.row.status==10" @click="joinOrganization(scope.row.id,scope.row.name)">加入</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>+6

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";


const user = ref(getUser());
//定义一个全局的用户
let userId = user.value.id;
//控制弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("创建组织");

//定义一个组织对象
const organization = ref({
  userId: '',
  name: '',
  establishmentDate: '',
  abbreviation: '',
  contactPerson: '',
  industry: '',
  contactPhone: '',
  address: '',
  contactEmail: '',
  status: '',
  description: '',
  role: '',
})
organization.value.userId = user.value.id;

//定义方法用于新增组织信息
const saveOrganization = () => {
  //下载qs
  let data = qs.stringify(organization.value);
  axios.post(BASE_URL + "/isms/organization/add", data)
      .then((response) => {
        if (response.data.code == 200) {
          ElMessage.success("添加成功!");
          organization.value = {};
          organization.value.userId = user.value.id;
          dialogVisible.value = false;
          selectOrganization();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//弹窗关闭询问
const closeDialog = () => {
  if (confirm("您确定要关闭吗?")) {
    dialogVisible.value = false;
    organization.value = {};
  }
}
//定义一个对象存储搜索卡片
const search = ref({
  name: '',
  abbreviation: '',
  industry: '',
  contactPerson:'',
  level:'',
  userId:'',
  status:''
})
//定义一个数组存储组织信息
const organizationInfo = ref([]);
//重置搜索卡片
const research = () => {
  search.value = {};
  selectOrganization();
}

//控制显示组织
const level = ref(30);
//定义加入组织的状态
const status = ref(20);
//定义一个函数用于查询
const selectOrganization = () => {
  search.value.level = level.value;
  search.value.userId = userId;
  search.value.status = status.value;
  let data = qs.stringify(search.value);
  axios.get(BASE_URL + "/isms/organization/select?" + data)
      .then((response) => {
        if (response.data.code == 200) {
          if (response.data.data == null) {
            ElMessage.warning("暂无组织信息!")
          } else {
            organizationInfo.value = response.data.data;
          }
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//让查询在页面加载就生效
onMounted(() => {
  selectOrganization();
})
//删除操作
const deleteOrganization = (id) => {
  if (confirm("您确定要删除吗？")) {
    axios.post(BASE_URL + "/isms/organization/delete/" + id)
        .then((response) => {
          if (response.data.code == 200) {
            ElMessage.success("删除成功!");
            selectOrganization();
          } else {
            ElMessage.error(response.data.code);
          }
        });
  }
}
//修改操作
const updateOrganization = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '修改组织信息'
  organization.value.id = id;
  axios.get(BASE_URL + "/isms/organization/select?id=" + id)
      .then((response) => {
        if (response.data.code == 200) {
          organization.value = response.data.data[0];
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//修改组织的状态
const changeStatus = (id,status) => {
  let data = qs.stringify({id:id,status:status});
  axios.post(BASE_URL+"/isms/organization/add",data)
      .then((response) => {
        if (response.data.code == 200) {
          if (status == 10) {
            ElMessage.success("激活成功!");
          }else {
            ElMessage.success("关闭成功!");
          }
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
//控制加入组织弹窗
const joinDialogVisible = ref(false);
//弹窗关闭
const joinCloseDialog = () => {
  if (confirm("您确定要关闭吗?")){
    joinDialogVisible.value = false;
    joinSaveInfo.value.name = '';
    joinSaveInfo.value.orgId = '';
    joinSaveInfo.value.role = '';
  }
}



//加入组织数据回显
const joinOrganization = (id,orgName) => {
  joinDialogVisible.value = true;
  organization.value.name = orgName;
  joinSaveInfo.value.orgId = id;
  joinSaveInfo.value.userId = user.value.id;
}
//定义对象存储加入组织的信息
const joinSaveInfo = ref({
  role:''
})
//定义函数加入组织
const join = () => {
  let data = qs.stringify(joinSaveInfo.value);
  console.log(data);
  axios.post(BASE_URL+"/isms/organization/join",data)
      .then((response) => {
        if (response.data.code == 200) {
          ElMessage.success("待审核!");
          joinSaveInfo.value.name = '';
          joinSaveInfo.value.orgId = '';
          joinSaveInfo.value.role = '';
          joinDialogVisible.value = false;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
//定义一个退出组织函数
const logout = (orgId) => {
  if (confirm("您确定要退出吗?")){
    axios.post(BASE_URL+"/isms/role/delete/"+userId+"/"+orgId)
        .then((response) => {
          if (response.data.code == 200){
            ElMessage.warning("退出成功!")
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}
</script>

<style scoped>

</style>